Google Charts একটি শক্তিশালী এবং সহজে ব্যবহারযোগ্য ডেটা ভিজ্যুয়ালাইজেশন টুল, যা HTML ফাইলের মধ্যে সহজেই যোগ করা যায়। এটি ব্যবহারের জন্য শুধুমাত্র একটি লাইব্রেরি লোড করতে হয় এবং এরপর JavaScript ব্যবহার করে ডেটা চার্টে রূপান্তর করা যায়। নিচে দেখানো হলো কীভাবে আপনি HTML ফাইলে Google Charts যোগ করবেন এবং সেটি ব্যবহার করে চার্ট তৈরি করবেন।
১. Google Charts লাইব্রেরি লোড করা
প্রথমে আপনাকে আপনার HTML ফাইলে Google Charts লাইব্রেরি লোড করতে হবে। এটি Google এর loader.js ফাইল থেকে করা হয়। এই লাইব্রেরি আপনার পৃষ্ঠায় অন্তর্ভুক্ত করতে হবে।
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
এটি আপনার HTML ফাইলের <head> ট্যাগে রাখতে হবে।
২. Google Charts প্যাকেজ লোড করা
Google Charts বিভিন্ন ধরনের চার্ট তৈরি করতে সাহায্য করে এবং এটি বিভিন্ন প্যাকেজের মাধ্যমে পরিচালিত হয়। আপনি যেই ধরনের চার্ট তৈরি করতে চান, সেই প্যাকেজটি লোড করতে হবে। নিচে corechart প্যাকেজ লোড করার একটি উদাহরণ দেয়া হলো:
google.charts.load('current', {packages: ['corechart']});
এটি আপনার JavaScript কোডে থাকতে হবে, যেখানে আপনি Google Charts লাইব্রেরি লোড করবেন।
৩. কলব্যাক ফাংশন সেট করা
Google Charts লোড করার পরে আপনাকে একটি কলব্যাক ফাংশন ব্যবহার করতে হবে, যা নিশ্চিত করবে যে লাইব্রেরি লোড হওয়ার পরেই চার্টটি তৈরি করা হবে। এটি google.charts.setOnLoadCallback() এর মাধ্যমে করা হয়।
google.charts.setOnLoadCallback(drawChart);
এখানে drawChart হলো সেই ফাংশন যা চার্ট তৈরি করবে।
৪. HTML এ কনটেইনার তৈরি করা
এখন আপনাকে একটি কনটেইনার তৈরি করতে হবে, যেখানে চার্টটি প্রদর্শিত হবে। সাধারণত একটি <div> ট্যাগ ব্যবহার করা হয়। উদাহরণ:
<div id="chart_div" style="width: 900px; height: 500px;"></div>
এটি সেই জায়গা যেখানে আপনার চার্টটি দেখা যাবে।
৫. JavaScript কোড দিয়ে চার্ট তৈরি করা
আপনার চার্ট তৈরি করার জন্য JavaScript কোড লিখতে হবে। এখানে আমরা একটি লাইন চার্ট তৈরি করবো।
function drawChart() {
// ডেটা তৈরি করা
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1170],
['2022', 660],
['2023', 1030]
]);
// চার্টের অপশন সেট করা
var options = {
title: 'Company Sales Over the Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales (in USD)'},
curveType: 'function',
legend: { position: 'bottom' }
};
// চার্ট তৈরি করা এবং প্রদর্শন
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
এটি JavaScript ফাংশন drawChart() যা ডেটা প্রস্তুত করবে এবং চার্ট প্রদর্শন করবে।
৬. সম্পূর্ণ HTML কোড উদাহরণ
এখন, সমস্ত কোড একত্রে দেখুন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Google Charts লোড করা
google.charts.load('current', {packages: ['corechart']});
// কলব্যাক ফাংশন
google.charts.setOnLoadCallback(drawChart);
// চার্ট তৈরি করার ফাংশন
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1170],
['2022', 660],
['2023', 1030]
]);
var options = {
title: 'Company Sales Over the Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales (in USD)'},
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Charts Example</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
উপসংহার
এটি ছিল একটি Google Charts লাইব্রেরি সেটআপ করার এবং HTML ফাইলে একটি চার্ট যোগ করার প্রক্রিয়া। Google Charts লাইব্রেরি ব্যবহার করে আপনি খুব সহজেই আপনার ওয়েবসাইটে ডেটা ভিজ্যুয়ালাইজেশন করতে পারবেন। এটি ডেটাকে আরও আকর্ষণীয় এবং বোঝার সহজ উপস্থাপনায় রূপান্তরিত করে, যা ব্যবহারকারীদের জন্য উপকারী হতে পারে।
Read more
